<template>
  <div>
    <div style="height: 310px">
      <div style="height: 300px" class="marginT10">
        <!-- 执行规则配置 -->
        <section style="width: 600px;margin: 0 auto">
          <el-form ref="section1Form" :rules="section1FormRules" :model="executeRuleDTO" label-width="150px"
                   size="small">
            <el-row :gutter="20">
              <el-col :span="18" class="col">
                <el-form-item label="执行规则名称" prop="ruleName">
                  <el-input v-model="executeRuleDTO.ruleName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="marginT10">
              <el-col :span="18" class="col">
                <el-form-item label="执行表达式" prop="cronExpression">
                  <el-popover v-model="cronPopover">
                    <cron @change="changeCronHandler" @close="cronPopover=false" i18n="cn"></cron>
                    <el-input slot="reference" @click="cronPopover=true" v-model="executeRuleDTO.cronExpression"
                              placeholder="请输入定时策略"></el-input>
                  </el-popover>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="marginT10">
              <el-col :span="24" class="col-textarea">
                <el-form-item label="备注">
                  <el-input type="textarea" v-model="executeRuleDTO.remark"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </section>
      </div>
      <div style="clear: both"></div>
      <section class="floatR">
        <el-button type="primary" size="small" @click="completedHandler" v-if="action==='update'">{{actionName}}
        </el-button>
      </section>
    </div>
  </div>
</template>

<script>
  import {
    updateExecuteRule,
    getExecuteRule
  } from '@/api/rule/index'
  import {cron} from 'vue-cron'

  export default {
    props: {
      executeRuleId:{
        type: Number,
        default: null
      },
      taskDTO: {
        type: Object,
        default: null
      },
      action: {
        type: String,
        default: 'update'
      }
    },
    data() {
      return {
        cronPopover: false,
        actionName: '修改',
        executeRuleDTO:
          {
            ruleName: null,
            cronExpression: null,
            executeAction: null,
            remark: null
          },
        section1FormRules: {
          ruleName: [
            {required: true, message: '请输入信息', trigger: 'blur'},
            {min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur'}
          ],
          cronExpression: [
            {required: true, message: '请输入信息', trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
      init() {
        if (this.action === 'add') {
          this.actionName = '添加';
          this.taskDTO.executeRuleDTO = this.executeRuleDTO;
          return;
        }
        getExecuteRule({id: this.executeRuleId}).then(response => {
          this.executeRuleDTO = response.data;
        });
      },
      // 更改cron表达式事件
      changeCronHandler(val) {
        this.executeRuleDTO.cronExpression = val
      },
      // 完成事件
      completedHandler() {
        let checkResult = true;
        this.$refs['section1Form'].validate((valid) => {
          if (!valid) {
            checkResult = false;
          }
        });
        if (!checkResult) {
          return false;
        }
        if (this.action === 'add') {
          return true;
        } else {
          updateExecuteRule({
            executeRuleDTO: this.executeRuleDTO
          }).then(response => {
            if (response.status === 0) {
              this.$message({
                message: this.actionName + '成功',
                type: 'success'
              });
              this.$emit("closeUpdateExecuteDialogHandler");
            }
          });
        }
      }
    },
    created() {
      this.init();
    },
    computed: {},
    components: {
      cron
    }
  }
</script>

<style scoped>
  .col {
    height: 40px;
  }

  .col-dialog {
    height: 50px;
  }

  .col-description {
    height: 70px;
  }

  .col-textarea {
    height: 70px;
  }
</style>
